/**
 * Created by ritamashin on 2017/11/1.
 */
import React from 'react'
import {Image, StyleSheet} from 'react-native'
import {StackNavigator, TabNavigator} from 'react-navigation'
import {COLOR} from './config'
import * as components from './components'
import GiftDetailView from './components/common/gift-detail/gift-detail-view'
import {TabBarItem} from './components'

const tabMe = StackNavigator(
    {
        Me : {screen : components.Me}
    },
    {

    }
)

const tabHomePage = StackNavigator(
    {
      HomePage : {screen: components.HomePage},
      GiftDetail : {screen : GiftDetailView}
    },
    {

    }
)

const tabClassify = StackNavigator(
    {
       Classify : {screen : components.Classify}
    },
    {

    }
)

const tabHotSale = StackNavigator(
    {
        HotSale : {screen : components.HotSale}
    },
    {

    }
)

const tab = TabNavigator(
    {
        TabHomePage : {
            screen : tabHomePage,
            navigationOptions : ({navigation}) =>({
                tabBarLabel : '首页',
                tabBarIcon : ({focus , tintColor })=>(
                    <TabBarItem
                        focus = {focus}
                        tintColor={tintColor}
                        normalImage={require('../resource/Tabbar/tab_icon_home_default.png')}
                        selectedImage = {require('../resource/Tabbar/tab_icon_home_Select.png')}
                    />
                ),
            }),

        },
        TabHotSale : {
            screen : tabHotSale,
            navigationOptions : ({navigation}) => ({
                tabBarLabel : '榜单',
                tabBarIcon: ({focused, tintColor}) => (
                    <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        normalImage={require('../resource/Tabbar/tab_btn_list_default.png')}
                        selectedImage = {require('../resource/Tabbar/tab_btn_list_select.png')}
                    />
                )
            })
        },
        // TabClassify : {
        //     screen : tabClassify,
        //     navigationOptions : (navigation) => ({
        //         tabBarLabel : '分类',
        //         tabBarIcon: ({focused, tintColor}) => (
        //             <TabBarItem
        //                 tintColor={tintColor}
        //                 focused={focused}
        //                 normalImage={require('../resource/Tabbar/tab_btn_sort_default.png')}
        //                 selectedImage = {require('../resource/Tabbar/tab_btn_sort_select.png')}
        //             />
        //         )
        //     })
        // },
        // TabMe : {
        //     screen : tabMe,
        //     navigationOptions : (navigation) => ({
        //         tabBarLabel : '我的',
        //         tabBarIcon: ({focused, tintColor}) => (
        //             <TabBarItem
        //                 tintColor={tintColor}
        //                 focused={focused}
        //                 normalImage={require('../resource/Tabbar/tab_btn_mine_default.png')}
        //                 selectedImage = {require('../resource/Tabbar/tab_btn_mine_select.png')}
        //             />
        //         )
        //     })
        // }
    },
    {
        tabBarPosition : 'bottom',
        lazy: true,
        headerMode: 'none',
        tabBarOptions: {
            activeTintColor : COLOR.themeRedColor,
            activeBackgroundColor : COLOR.backgroundLighter,
            inactiveTintColor : COLOR.mainTextColor,
            inactiveBackgroundColor : COLOR.backgroundLighter,
            showIcon : true,
            showLabel : true,
            style: {backgroundColor : COLOR.backgroundDarker},
            tabStyle : {paddingTop : 2, paddingBottom: 0},
            labelStyle: {fontSize: 12, marginTop: 0, marginBottom: 5}
        }
    }
)

export const AppNavigator = StackNavigator(
    {
        Tab : {screen : tab}
    },
    {
        initialRoute : 'Tab',
        headerMode: 'none',
        navigationOptions :{
            gesturesEnabled : false
        }
    }
)


const styles = StyleSheet.create({
    icon: {
        fontSize: 12,
        color: COLOR.mainTextColor,
        backgroundColor: 'transparent'
    }
})